<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="slider.css"/>
	</head>
	<body>
		
		<div class="img-slider">
	        <div class="img-wp">
	            <div index="0"><img src="img/1.jpg" alt=""></div>
	            <div index="1"><img src="img/2.jpg" alt=""></div>
	            <div index="2"><img src="img/3.jpg" alt=""></div>
	            <div index="3"><img src="img/4.jpg" alt=""></div>
	            <div index="4"><img src="img/5.jpg" alt=""></div>
	        </div>
	        <ul class="img-trigger">
	            <li class="on"></li>
	            <li></li>
	            <li></li>
	            <li></li>
	            <li></li>
	        </ul>
	        <a class="prev" href="javascript:;"></a>
	        <a class="next" href="javascript:;"></a>
	    </div>
	    
	    <hr />
	    
	    <div class="img-slider">
	        <div class="img-wp">
	            <div index="0"><img src="img/1.jpg" alt=""></div>
	            <div index="1"><img src="img/2.jpg" alt=""></div>
	            <div index="2"><img src="img/3.jpg" alt=""></div>
	            <div index="3"><img src="img/4.jpg" alt=""></div>
	        </div>
	        <ul class="img-trigger">
	            <li class="on"></li>
	            <li></li>
	            <li></li>
	            <li></li>
	        </ul>
	        <a class="prev" href="javascript:;"></a>
	        <a class="next" href="javascript:;"></a>
	    </div>
		
		<script src="../../lib/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.slider.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('.img-slider').slider();
		</script>
	</body>
</html>
